<template>
  <div>
    <!-- 设置背景 -->
    <div class="bgc" :style="bg"></div>
    <!-- 登陆界面 -->
    <el-form ref="form" :rules="rules" :model="form" class="loginView">
      <h2 class="loginTitle">管理员登录界面</h2>
      <el-form-item label="用户名" prop="user">
        <el-input v-model="form.user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="psw">
        <el-input
          v-model="form.psw"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item class="loginButton">
        <el-button type="primary" style="padding: 14px 25px" @click="Onsubmit"
          >登陆</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { request } from "../network/request";
export default {
  name: "AdminLogin",
  data() {
    return {
      form: {
        user: "",
        psw: "",
      },
      bg: {
        backgroundImage: "url(" + require("../../assets/logo.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "700px",
      },
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        psw: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    if (this.$_admin_islogin == true) {
      this.$router.push({
        name: "AdminIndex",
      });
    }
  },
  methods: {
    Onsubmit() {
      // 验证账号密码正误
      request({
        url: "/admin/login",
        method: "POST",
        data: { username: this.form.user, password: this.form.psw },
      })
        .then((res) => {
          if (res.data.code == "200") {
            this.$store.state.admin_islogin = true;
            this.$store.state.admin_username = res.data.username;
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.$router.push({
              name: "AdminIndex",
              params: {
                data: res.data.msg,
              },
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.loginView {
  width: 300px;
  border: 1px solid #dcdfe6;
  padding: 30px;
  margin: 140px auto;
  border-radius: 5px;
  box-shadow: 0px 0px 30px #dcdfe6;
  background-color: rgba(144, 147, 153, 0.5);
}
.loginButton {
  padding: 10px 0 0 110px;
}
.loginTitle {
  text-align: center;
  color: #f56c6c;
}
.bgc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -100;
  zoom: 1;
  background-color: #fff;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
</style>
